<template>
	<LeftBox>
		<div class="content-inner">
			<div class="gjtl">
				<SubTitle title="国家铁路" img="global/国家铁路.png" />
				<div class="gjtl-inner">
					<div class="table">
						<TrainInfo />
					</div>
					<div class="info">
						<PassengerInfo />
					</div>
				</div>
			</div>
			<div class="city-bus-station">
				<SubTitle title="城市公交场站" img="global/城市公交场站.png">
					<template #right>
						<div class="rightSlot">
							<input type="text" v-model="busName" :placeholder="'请输入线路'" />
							<div class="btn" @click="search">查询</div>
							<div class="btn" @click="reset">重置</div>
						</div>
					</template>
				</SubTitle>
				<div class="cbs-inner">
					<CityBusStation ref="CityBusStationRef" v-model:bus-name="busName" />
				</div>
			</div>
		</div>
	</LeftBox>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import TrainInfo from './left/TrainInfo.vue'
	import PassengerInfo from './left/PassengerInfo.vue'
	import CityBusStation from './left/CityBusStation.vue'
	const busName = ref(undefined)
	const CityBusStationRef = ref()
	const search = () => {
		CityBusStationRef.value.search(busName.value)
	}
	const reset = () => {
		CityBusStationRef.value.reset()
	}
</script>

<style lang="scss" scoped>
	.gjtl,
	.city-bus-station {
		width: 100%;
		background-image: url(@img/global/panel-bg.png);
		background-size: 100% 100%;
		padding-bottom: 50px;
	}
	.city-bus-station {
		margin-top: 25px;
		.cbs-inner {
			margin: 20px 0;
			padding: 0 30px;
		}
	}
	.gjtl-inner {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 30px;

		box-sizing: border-box;

		.table {
			flex: 7.5;
		}
		.info {
			flex: 2.5;
			margin-left: 25px;
		}
	}
	.rightSlot {
		font-size: 30px;
		display: flex;
		padding-right: 120px;

		input {
			outline: none;
			background-color: rgba(11, 70, 132);
			border: none;
			color: #fff;
			padding-left: 10px;
			height: 50px;
			align-self: center;
		}
		.btn {
			background-color: rgb(11, 70, 132);
			color: #fff;
			font-size: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100px;
			height: 55px;
			cursor: pointer;
			border-radius: 4px;
			margin: 0 5px;
			align-self: center;
			&:hover {
				background-color: #0057c0;
			}
		}
	}
</style>
./left/PassengerInfo.vue ./left/CityBusStation.vue
